<template>
  <u-toast ref="uToast"></u-toast>
  <LookAround :LeftShow="true"></LookAround>
  <view class="Login">
    <view class="LoginTip"> {{ titleText }} </view>
    <!-- 登录信息 -->
    <view>
      <u-input placeholder="请输入手机号码" border="bottom" v-model="Users.mobile" :customStyle="customStyle"></u-input>

      <!-- 获取验证码 -->
      <u-input type="number" placeholder="请输入短信验证码" border="bottom" v-model="Users.code" :customStyle="customStyle">
        <template #suffix>
          <u-code ref="uCode" @change="codeChange" keep-running start-text="获取验证码"></u-code>
          <text @tap="getCode" :text="tips" style="color:#777777;" class="u-page__code-text">{{ tips }}</text>
          <!-- <u-code ref="uCode" @change="codeChange" :seconds="seconds" :keepRunning="true" changeText="x秒重新获取"
            unique-key="login"></u-code>
          <u-button color="#FF0000" @tap="getCode" :text="tips" type="primary" size="small"></u-button> -->
        </template>
      </u-input>
      <!-- 请输入密码 -->
      <u-input placeholder="请输入新的密码" border="bottom" type="password" v-model="Users.password" :customStyle="customStyle">
      </u-input>
      <!-- 请输入再次密码 -->
      <u-input placeholder="请再次输入新的密码" border="bottom" type="password" v-model="Users.confirmPassword"
        :customStyle="customStyle">
      </u-input>
      <!-- 登录 -->
      <view style="text-align: center">
        <view class="login boder_r" @click="register">重置密码</view>
      </view>
    </view>
  </view>
  <!-- 底部操作按钮 -->
  <view> </view>
</template>
<script setup lang="ts">
import { getCurrentInstance, ref, onDeactivated } from "vue";
import ChangePassword from "@/Hooks/Login/ChangePassword";
import { onLoad } from "@dcloudio/uni-app";
const { proxy } = getCurrentInstance() as any;
const { tips, getCode, codeChange, seconds, Users, register } =
  ChangePassword(proxy);

const titleText = ref<string>('忘记密码')

const customStyle = {
  height: "65rpx",
};

onLoad((options: any) => {
  if (options.Type == 0) {
    titleText.value = '修改密码'
  }



})
onDeactivated(() => {
  Users.mobile = "";
  Users.code = "";
  Users.password = "";
  Users.confirmPassword = "";
});
</script>

<style lang="scss" scoped>
.Login {
  padding: 0 48rpx;
  font-size: $fontS_26;

  .LoginTip {
    font-size: $fontS_50;
    font-weight: 400;
    margin-left: 10rpx;
    height: 133rpx;
  }

  .register {
    margin: 43rpx 0 57rpx;
    color: $color_777;
  }

  .login {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background: $color_def;
    color: $color_fff;
    margin-top: 80rpx;
  }

  .pass {
    color: $color_777;
    margin-top: 37rpx;
  }
}

.u-input {
  border-bottom: 1rpx solid #D8D8D8;
}
</style>
